<template>
  <view class="container">
    <!-- 第一步：顶部筛选区域 - 优化版 -->
    <view class="filter-section">
   
      <!-- 搜索框 -->
      <view class="search-box">
        <view class="search-input-wrapper">
          <text class="search-icon">🔍</text>
          <input type="text" placeholder="搜索活动" v-model="searchText" confirm-type="search" @confirm="handleSearch" />
          <text class="clear-btn" v-if="searchText" @tap="clearSearch">×</text>
        </view>
      </view>
      
      <!-- 筛选按钮区域 -->
      <view class="filter-buttons">
        <!-- 日期选择器 -->
        <view class="filter-btn date-picker" @tap="openDateRangePicker">
          <text class="date-icon">📅</text>
          <text class="filter-text">{{ dateRangeText }}</text>
        </view>
        
        <!-- 城市选择器 -->
        <view class="filter-btn city-picker" @tap="showCityPicker = true">
          <text class="city-icon">📍</text>
          <text class="filter-text">{{ selectedCitiesText }}</text>
        </view>
      </view>
    </view>
    
    <!-- 已选筛选条件展示 -->
    <view class="selected-filters" v-if="filterTags.length > 0">
      <scroll-view scroll-x class="filter-tags">
        <view class="tag" v-for="(tag, index) in filterTags" :key="index">
          {{ tag.text }}
          <text class="tag-close" @tap="removeTag(index)">×</text>
        </view>
      </scroll-view>
      <view class="clear-all" @tap="clearAllFilters">清空</view>
    </view>
    
    <!-- 日期选择弹窗 -->
    <view class="modal" v-if="showDatePicker">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择日期</text>
          <text class="close-btn" @tap="showDatePicker = false">取消</text>
        </view>
        
        <view class="date-shortcuts">
          <view 
            v-for="(shortcut, index) in dateShortcuts" 
            :key="index"
            :class="['shortcut-btn', selectedShortcut === index ? 'active' : '']"
            @tap="selectDateShortcut(index)"
          >
            {{ shortcut.text }}
          </view>
        </view>
        
        <view class="calendar-view">
          <picker-view 
            :value="datePickerValue" 
            @change="onDatePickerChange"
            class="date-picker-view"
          >
            <picker-view-column>
              <view class="picker-item" v-for="(year, index) in years" :key="index">{{ year }}年</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(month, index) in months" :key="index">{{ month }}月</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(day, index) in days" :key="index">{{ day }}日</view>
            </picker-view-column>
          </picker-view>
        </view>
        
        <view class="modal-footer">
          <view class="confirm-btn" @tap="confirmDateSelection">确定</view>
        </view>
      </view>
    </view>
    
    <!-- 城市选择弹窗 -->
    <view class="modal" v-if="showCityPicker">
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择城市</text>
          <text class="close-btn" @tap="showCityPicker = false">取消</text>
        </view>
        
        <view class="hot-cities">
          <text class="section-label">热门城市</text>
          <view class="city-tags">
            <view 
              v-for="(city, index) in hotCities" 
              :key="index"
              :class="['city-tag', isSelectedCity(city) ? 'active' : '']"
              @tap="toggleCity(city)"
            >
              {{ city }}
            </view>
          </view>
        </view>
        
        <view class="selected-cities" v-if="selectedCities.length > 0">
          <text class="section-label">已选城市</text>
          <view class="city-tags">
            <view class="selected-tag" v-for="(city, index) in selectedCities" :key="index">
              {{ city }}
              <text class="tag-close" @tap="removeCity(index)">×</text>
            </view>
          </view>
        </view>
        
        <view class="all-cities">
          <text class="section-label">全部城市</text>
          <scroll-view scroll-y class="city-list">
            <view class="city-group" v-for="(cities, letter) in cityGroups" :key="letter">
              <text class="group-label">{{ letter }}</text>
              <view class="group-cities">
                <view 
                  v-for="(city, index) in cities" 
                  :key="index"
                  :class="['city-item', isSelectedCity(city) ? 'active' : '']"
                  @tap="toggleCity(city)"
                >
                  {{ city }}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        
        <view class="modal-footer">
          <view class="confirm-btn" @tap="confirmCitySelection">确定</view>
        </view>
      </view>
    </view>

    <!-- 第二部分：活动轮播展示区 -->
    <view class="carousel-section">
      <view class="section-header">
        <text class="section-title">热门活动</text>
        <view class="carousel-controls">
          <view class="control-dot" :class="{ active: isPaused }" @tap="toggleAutoplay">
            <text class="control-icon">{{ isPaused ? '▶' : '❚❚' }}</text>
          </view>
        </view>
      </view>
      
      <view class="carousel-container">
        <swiper 
          class="carousel-swiper"
          :current="currentIndex"
          @change="onSwiperChange"
          circular
          :autoplay="!isPaused"
          interval="5000"
          duration="500"
          :previous-margin="swiperMargin"
          :next-margin="swiperMargin"
          @transition="onSwiperTransition"
        >
          <swiper-item v-for="(item, index) in carouselItems" :key="index" class="swiper-item">
            <view 
              class="carousel-card"
              :class="{ active: currentIndex === index }"
              :style="{ transform: getTransform(index) }"
              @tap="onCardTap(item, index)"
            >
              <image class="carousel-image" :src="item.image" mode="aspectFill"></image>
              <view class="carousel-tag" v-if="item.isHot">热门</view>
              <view class="carousel-tag recommend" v-if="item.isRecommended">推荐</view>
              
              <view class="carousel-info">
                <view class="carousel-title">{{ item.title }}</view>
                <view class="carousel-meta">
                  <view class="meta-item">
                    <text class="meta-icon">📅</text>
                    <text>{{ item.date }}</text>
                  </view>
                  <view class="meta-item">
                    <text class="meta-icon">📍</text>
                    <text>{{ item.location }}</text>
                  </view>
                </view>
                <view class="carousel-price">
                  <text class="price-label">¥</text>
                  <text class="price-value">{{ item.price }}</text>
                  <text class="price-original" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
      
      <!-- 轮播指示器 -->
      <view class="carousel-indicators">
        <view 
          v-for="(item, index) in carouselItems" 
          :key="index" 
          :class="['indicator-dot', currentIndex === index ? 'active' : '']"
          @tap="setCurrentIndex(index)"
        ></view>
      </view>
      
      <!-- 缩略图预览 -->
      <scroll-view 
        scroll-x 
        class="carousel-thumbnails" 
        :scroll-left="thumbnailScrollLeft"
        @scroll="onThumbnailScroll"
        show-scrollbar="false"
      >
        <view 
          v-for="(item, index) in carouselItems" 
          :key="index"
          :class="['thumbnail-item', currentIndex === index ? 'active' : '']"
          @tap="setCurrentIndex(index)"
        >
          <image :src="item.image" mode="aspectFill"></image>
        </view>
      </scroll-view>
    </view>



    <!-- 添加底部安全区域占位 -->
    <view class="tabbar-placeholder"></view>
    
    <!-- 使用自定义 TabBar 组件 -->
    <cc-myTabbar :tabBarShow="0"></cc-myTabbar>

    <!-- 使用 uView 的日历组件 -->
    <u-calendar 
      :show="showCalendar"
      mode="range"
      @confirm="calendarConfirm"
      @close="showCalendar = false"
      color="#007aff"
    ></u-calendar>

    <!-- 日期范围选择弹窗 -->
    <view class="modal" v-if="showDateRangePicker">
      <view class="modal-content date-range-picker">
        <view class="modal-header">
          <text class="modal-title">选择日期范围</text>
          <text class="close-btn" @tap="showDateRangePicker = false">取消</text>
        </view>
        
        <!-- 快捷选择 -->
        <view class="date-shortcuts">
          <view 
            v-for="(shortcut, index) in dateRangeShortcuts" 
            :key="index"
            :class="['shortcut-btn', selectedRangeShortcut === index ? 'active' : '']"
            @tap="selectDateRangeShortcut(index)"
          >
            {{ shortcut.text }}
          </view>
        </view>
        
        <!-- 开始日期选择 -->
        <view class="date-range-section">
          <view class="date-range-label">开始日期</view>
          <picker 
            mode="date" 
            :value="startDate" 
            :start="minDate" 
            :end="maxDate"
            @change="onStartDateChange"
          >
            <view class="date-picker-field">
              <text>{{ startDate || '请选择' }}</text>
              <text class="field-arrow">▼</text>
            </view>
          </picker>
        </view>
        
        <!-- 结束日期选择 -->
        <view class="date-range-section">
          <view class="date-range-label">结束日期</view>
          <picker 
            mode="date" 
            :value="endDate" 
            :start="startDate || minDate" 
            :end="maxDate"
            @change="onEndDateChange"
          >
            <view class="date-picker-field">
              <text>{{ endDate || '请选择' }}</text>
              <text class="field-arrow">▼</text>
            </view>
          </picker>
        </view>
        
        <!-- 已选择的日期范围预览 -->
        <view class="selected-range-preview" v-if="startDate && endDate">
          <text class="preview-label">已选择:</text>
          <text class="preview-value">{{ formatDisplayDateRange() }}</text>
        </view>
        
        <view class="modal-footer">
          <view class="confirm-btn" @tap="confirmDateRangeSelection">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { qrcode, coach, edit_info, getUserInfo } from "../../api/fit";

export default {

  data() {
    return {
      baseList: [
        {
          name: "photo",
          title: "图片",
        },
        {
          name: "lock",
          title: "锁头",
        },
      ],
      participants:[
        {gender:'男'},
        {gender:'男'},
        {gender:'男'},
        {gender:'男'},
        
      ],
      logoSrc: "",
      showModal: false,
      qrCodeUrl: "",
      role: "",
      planName: "",
      userName: "",
      coachPlan: {
        planCount: 0,
        physicalFitnessCount: 0,
      },
      dataList: [],
      unitOptions: [
        { label: "次", value: "c" },
        { label: "秒", value: "s" },
        { label: "分", value: "m" },
      ],
      avatarUrl: "",
      isEditing: false,
      // TabBar 相关数据
      currentTabIndex: 0,
      tabBarItems: [
        { icon: '🏠', text: '首页', url: '/pages/index/index' },
        { icon: '🔍', text: '分类', url: '/pages/category/index' },
        { icon: '+', text: '发布', url: '' },
        { icon: '💬', text: '消息', url: '/pages/message/index' },
        { icon: '👤', text: '我的', url: '/pages/user/index' }
      ],
      
      // 筛选区域数据
      searchText: "",
      dateRangeText: "选择日期",
      selectedCitiesText: "选择城市",
      filterTags: [],
      
      // 日期选择器数据
      showDatePicker: false,
      dateShortcuts: [
        { text: "今日", value: "today" },
        { text: "明日", value: "tomorrow" },
        { text: "本周", value: "thisWeek" },
        { text: "下周", value: "nextWeek" }
      ],
      selectedShortcut: -1,
      datePickerValue: [0, 0, 0],
      years: [],
      months: [],
      days: [],
      selectedDate: null,
      
      // 城市选择器数据
      showCityPicker: false,
      hotCities: ["北京", "上海", "广州", "深圳", "杭州", "成都", "重庆", "南京"],
      selectedCities: [],
      cityGroups: {
        "A": ["安徽", "鞍山"],
        "B": ["北京", "保定", "包头"],
        "C": ["重庆", "成都", "长沙", "常州"],
        "D": ["大连", "东莞", "大庆"],
        "F": ["福州", "佛山"],
        "G": ["广州", "贵阳"],
        "H": ["杭州", "合肥", "哈尔滨", "海口"],
        "J": ["济南", "嘉兴", "金华"],
        "K": ["昆明"],
        "L": ["兰州", "洛阳"],
        "N": ["南京", "宁波", "南昌", "南宁"],
        "Q": ["青岛", "泉州"],
        "S": ["上海", "深圳", "苏州", "沈阳", "石家庄"],
        "T": ["天津", "太原"],
        "W": ["武汉", "无锡", "温州"],
        "X": ["西安", "厦门", "徐州"],
        "Y": ["烟台", "扬州"],
        "Z": ["郑州", "珠海", "中山"]
      },
      
      // 轮播相关数据
      carouselItems: [
        {
          id: 1,
          title: "2023夏日音乐节",
          description: "与顶级艺术家一起度过难忘的夏日夜晚",
          image: "https://picsum.photos/id/1/800/450",
          date: "2023-07-15",
          location: "上海体育场",
          price: 299,
          originalPrice: 399,
          isHot: true,
          isRecommended: false
        },
        {
          id: 2,
          title: "国际美食节",
          description: "品尝来自世界各地的美食",
          image: "https://picsum.photos/id/2/800/450",
          date: "2023-08-05",
          location: "北京国家会展中心",
          price: 188,
          originalPrice: 258,
          isHot: false,
          isRecommended: true
        },
        {
          id: 3,
          title: "科技创新展",
          description: "探索未来科技的无限可能",
          image: "https://picsum.photos/id/3/800/450",
          date: "2023-09-10",
          location: "深圳会展中心",
          price: 120,
          originalPrice: 150,
          isHot: true,
          isRecommended: true
        },
        {
          id: 4,
          title: "瑜伽与冥想工作坊",
          description: "找回内心的平静与和谐",
          image: "https://picsum.photos/id/4/800/450",
          date: "2023-07-22",
          location: "杭州西湖文化中心",
          price: 99,
          originalPrice: 0,
          isHot: false,
          isRecommended: false
        },
        {
          id: 5,
          title: "古典音乐会",
          description: "聆听贝多芬的不朽名作",
          image: "https://picsum.photos/id/5/800/450",
          date: "2023-08-15",
          location: "广州大剧院",
          price: 280,
          originalPrice: 380,
          isHot: false,
          isRecommended: true
        }
      ],
      currentIndex: 0,
      isPaused: false,
      swiperMargin: "60rpx",
      thumbnailScrollLeft: 0,
      transitionProgress: 0,
      touchStartX: 0,
      
      // 拼团相关数据
      currentGroupTab: 0,
      groupTabs: [
        { text: '全部', value: 'all' },
        { text: '可参与', value: 'available' },
        { text: '即将截止', value: 'ending' },
        { text: '满员', value: 'full' }
      ],
      groupBuyingList: [
        {
          id: 1,
          title: "首尔精选3日游",
          image: "https://picsum.photos/id/10/200/200",
          date: new Date(new Date().getTime() + 24 * 60 * 60 * 1000), // 明天
          departure: "上海",
          destination: "首尔",
          flightNumber: "KE856",
          departureTime: "09:00",
          arrivalTime: "12:30",
          seatClass: "经济舱",
          groupPrice: 1999,
          originalPrice: 2999,
          requiredMembers: 5,
          members: [
            { id: 1, name: "张三", avatar: "https://picsum.photos/id/1001/100/100" },
            { id: 2, name: "李四", avatar: "https://picsum.photos/id/1002/100/100" },
            { id: 3, name: "王五", avatar: "https://picsum.photos/id/1003/100/100" }
          ],
          deadline: new Date(new Date().getTime() + 48 * 60 * 60 * 1000).toISOString() // 48小时后
        },
        {
          id: 2,
          title: "济州岛休闲2日游",
          image: "https://picsum.photos/id/11/200/200",
          date: new Date(new Date().getTime() + 3 * 24 * 60 * 60 * 1000), // 3天后
          departure: "北京",
          destination: "济州岛",
          flightNumber: "OZ302",
          departureTime: "10:30",
          arrivalTime: "13:45",
          seatClass: "经济舱",
          groupPrice: 1599,
          originalPrice: 1999,
          requiredMembers: 4,
          members: [
            { id: 4, name: "赵六", avatar: "https://picsum.photos/id/1004/100/100" },
            { id: 5, name: "钱七", avatar: "https://picsum.photos/id/1005/100/100" }
          ],
          deadline: new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toISOString() // 24小时后
        },
        {
          id: 3,
          title: "釜山美食3日游",
          image: "https://picsum.photos/id/12/200/200",
          date: new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000), // 5天后
          departure: "广州",
          destination: "釜山",
          flightNumber: "KE688",
          departureTime: "08:45",
          arrivalTime: "11:50",
          seatClass: "商务舱",
          groupPrice: 2599,
          originalPrice: 3299,
          requiredMembers: 6,
          members: [
            { id: 6, name: "孙八", avatar: "https://picsum.photos/id/1006/100/100" },
            { id: 7, name: "周九", avatar: "https://picsum.photos/id/1007/100/100" },
            { id: 8, name: "吴十", avatar: "https://picsum.photos/id/1008/100/100" },
            { id: 9, name: "郑十一", avatar: "https://picsum.photos/id/1009/100/100" }
          ],
          deadline: new Date(new Date().getTime() + 36 * 60 * 60 * 1000).toISOString() // 36小时后
        },
        {
          id: 4,
          title: "仁川购物2日游",
          image: "https://picsum.photos/id/13/200/200",
          date: new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000), // 7天后
          departure: "深圳",
          destination: "仁川",
          flightNumber: "OZ334",
          departureTime: "11:15",
          arrivalTime: "14:30",
          seatClass: "经济舱",
          groupPrice: 1799,
          originalPrice: 2199,
          requiredMembers: 5,
          members: [
            { id: 10, name: "刘一", avatar: "https://picsum.photos/id/1010/100/100" },
            { id: 11, name: "陈二", avatar: "https://picsum.photos/id/1011/100/100" },
            { id: 12, name: "张三", avatar: "https://picsum.photos/id/1012/100/100" }
          ],
          deadline: new Date(new Date().getTime() + 60 * 60 * 60 * 1000).toISOString() // 60小时后
        },
        {
          id: 5,
          title: "大邱文化4日游",
          image: "https://picsum.photos/id/14/200/200",
          date: new Date(new Date().getTime() + 10 * 24 * 60 * 60 * 1000), // 10天后
          departure: "上海",
          destination: "大邱",
          flightNumber: "KE766",
          departureTime: "13:20",
          arrivalTime: "16:35",
          seatClass: "头等舱",
          groupPrice: 3999,
          originalPrice: 4999,
          requiredMembers: 4,
          members: [
            { id: 13, name: "李四", avatar: "https://picsum.photos/id/1013/100/100" },
            { id: 14, name: "王五", avatar: "https://picsum.photos/id/1014/100/100" }
          ],
          deadline: new Date(new Date().getTime() + 72 * 60 * 60 * 1000).toISOString() // 72小时后
        }
      ],
      countdownTimer: null,
      // 列表相关数据
      viewMode: 'list', // list 或 grid
      showSortOptions: false,
      currentSort: 'recommended',
      sortOptions: [
        { text: '推荐排序', value: 'recommended' },
        { text: '价格从低到高', value: 'priceAsc' },
        { text: '价格从高到低', value: 'priceDesc' },
        { text: '日期最近', value: 'dateAsc' },
        { text: '热度最高', value: 'hotDesc' }
      ],
      listItems: [
        {
          id: 1,
          title: "首尔旅游团",
          image: "https://picsum.photos/id/26/200/200",
          date: "2023-08-15",
          departure: "上海",
          destination: "首尔",
          flightNumber: "KE856",
          departureTime: "08:30",
          arrivalTime: "11:45",
          groupCount: 3,
          remainingSlots: 5
        },
        {
          id: 2,
          title: "济州岛休闲团",
          image: "https://picsum.photos/id/27/200/200",
          date: "2023-08-18",
          departure: "北京",
          destination: "济州岛",
          flightNumber: "OZ302",
          departureTime: "09:15",
          arrivalTime: "12:30",
          groupCount: 2,
          remainingSlots: 8
        },
        // 更多项目...
      ],
      page: 1,
      pageSize: 10,
      isLoading: false,
      isAllLoaded: false,
      showCalendar: false,
      defaultCalendarDate: ['', ''], // 先用空字符串初始化
      selectedDateRange: [],
      showDateRangePicker: false,
      dateRangeShortcuts: [
        { text: "今日", value: "today" },
        { text: "本周", value: "thisWeek" },
        { text: "本月", value: "thisMonth" },
        { text: "未来7天", value: "next7days" },
        { text: "未来30天", value: "next30days" }
      ],
      selectedRangeShortcut: -1,
      startDate: '',
      endDate: '',
      minDate: '2023-01-01',
      maxDate: '2025-12-31',
    };
  },
  onReady() {
			// uni.hideTabBar()
		},
  created() {
    this.initDatePicker();
    // 初始化默认日历日期
    this.initDefaultCalendarDate();
    // 模拟初始加载
    this.loadItems();
    
    // 添加滚动监听
    uni.$on('onReachBottom', this.onReachBottom);
  },

  computed: {
    filteredGroups() {
      let result = [...this.groupBuyingList];
      
      // 根据标签筛选
      if (this.currentGroupTab !== 0) {
        const filterType = this.groupTabs[this.currentGroupTab].value;
        
        switch (filterType) {
          case 'available':
            result = result.filter(group => 
              group.members.length < group.requiredMembers && 
              new Date(group.deadline) > new Date()
            );
            break;
          case 'ending':
            const now = new Date();
            const oneDayLater = new Date(now.getTime() + 24 * 60 * 60 * 1000);
            result = result.filter(group => 
              new Date(group.deadline) > now && 
              new Date(group.deadline) < oneDayLater
            );
            break;
          case 'full':
            result = result.filter(group => 
              group.members.length >= group.requiredMembers
            );
            break;
        }
      }
      
      // 按截止时间排序
      result.sort((a, b) => new Date(a.deadline) - new Date(b.deadline));
      
      return result;
    },
    currentSortText() {
      const option = this.sortOptions.find(opt => opt.value === this.currentSort);
      return option ? option.text : '推荐排序';
    },
    displayedItems() {
      let items = [...this.listItems];
      
      // 根据排序方式排序
      switch (this.currentSort) {
        case 'priceAsc':
          items.sort((a, b) => a.groupPrice - b.groupPrice);
          break;
        case 'priceDesc':
          items.sort((a, b) => b.groupPrice - a.groupPrice);
          break;
        case 'dateAsc':
          items.sort((a, b) => new Date(a.date) - new Date(b.date));
          break;
        case 'hotDesc':
          items.sort((a, b) => b.viewCount - a.viewCount);
          break;
        // 推荐排序可能是基于多个因素的复杂排序，这里简化处理
        default:
          break;
      }
      
      return items;
    }
  },

  mounted() {
    // 启动倒计时定时器
    this.countdownTimer = setInterval(() => {
      this.$forceUpdate(); // 强制更新视图以刷新倒计时
    }, 1000);
  },

  beforeDestroy() {
    // 清除定时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
    // 移除事件监听
    uni.$off('onReachBottom', this.onReachBottom);
  },

  onLoad() {
    // 增加TabBar点击处理
    uni.$on('tabBarClick', this.handleTabBarClick);
  },
  
  onUnload() {
    uni.$off('tabBarClick', this.handleTabBarClick);
  },

  methods: {
    // 筛选区域方法
    handleSearch() {
      if (!this.searchText) return;
      
      this.addFilterTag('search', this.searchText);
      // 这里可以添加搜索逻辑
    },
    
    clearSearch() {
      this.searchText = "";
      this.removeTagByType('search');
    },
    
    addFilterTag(type, text) {
      // 先移除同类型的标签
      this.removeTagByType(type);
      
      // 添加新标签
      this.filterTags.push({ type, text });
    },
    
    removeTag(index) {
      const tag = this.filterTags[index];
      
      if (tag.type === 'search') {
        this.searchText = "";
      } else if (tag.type === 'date') {
        this.dateRangeText = "选择日期";
      } else if (tag.type === 'city') {
        this.selectedCities = [];
        this.selectedCitiesText = "选择城市";
      }
      
      this.filterTags.splice(index, 1);
    },
    
    removeTagByType(type) {
      const index = this.filterTags.findIndex(tag => tag.type === type);
      if (index !== -1) {
        this.filterTags.splice(index, 1);
      }
    },
    
    clearAllFilters() {
      this.searchText = "";
      this.dateRangeText = "选择日期";
      this.selectedCities = [];
      this.selectedCitiesText = "选择城市";
      this.filterTags = [];
    },
    
    // 日期选择器方法
    initDatePicker() {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      
      // 生成年份列表（前后10年）
      this.years = Array.from({length: 21}, (_, i) => currentYear - 10 + i);
      
      // 生成月份列表
      this.months = Array.from({length: 12}, (_, i) => i + 1);
      
      // 生成天数列表（默认31天）
      this.updateDays(currentYear, currentDate.getMonth() + 1);
      
      // 设置默认值为当前日期
      this.datePickerValue = [
        10, // 当前年份在列表中的索引
        currentDate.getMonth(),
        currentDate.getDate() - 1
      ];
      
      this.selectedDate = currentDate;
    },
    
    updateDays(year, month) {
      const daysInMonth = new Date(year, month, 0).getDate();
      this.days = Array.from({length: daysInMonth}, (_, i) => i + 1);
    },
    
    onDatePickerChange(e) {
      const values = e.detail.value;
      this.datePickerValue = values;
      
      const year = this.years[values[0]];
      const month = this.months[values[1]];
      
      // 更新天数列表
      this.updateDays(year, month);
      
      // 如果选择的天数超出了当月的最大天数，则调整为当月最后一天
      if (values[2] >= this.days.length) {
        this.datePickerValue[2] = this.days.length - 1;
      }
      
      // 更新选中的日期
      this.selectedDate = new Date(year, month - 1, this.days[this.datePickerValue[2]]);
    },
    
    selectDateShortcut(index) {
      this.selectedShortcut = index;
      
      const today = new Date();
      const shortcut = this.dateShortcuts[index].value;
      
      if (shortcut === 'today') {
        this.selectedDate = today;
      } else if (shortcut === 'tomorrow') {
        const tomorrow = new Date(today);
        tomorrow.setDate(today.getDate() + 1);
        this.selectedDate = tomorrow;
      } else if (shortcut === 'thisWeek') {
        // 本周的日期范围
        const dayOfWeek = today.getDay();
        const diff = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1);
        const startOfWeek = new Date(today.setDate(diff));
        this.selectedDate = startOfWeek;
      } else if (shortcut === 'nextWeek') {
        // 下周的日期范围
        const dayOfWeek = today.getDay();
        const diff = today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) + 7;
        const startOfNextWeek = new Date(today.setDate(diff));
        this.selectedDate = startOfNextWeek;
      }
      
      // 更新日期选择器的值
      const year = this.selectedDate.getFullYear();
      const month = this.selectedDate.getMonth() + 1;
      const day = this.selectedDate.getDate();
      
      const yearIndex = this.years.findIndex(y => y === year);
      const monthIndex = month - 1;
      const dayIndex = day - 1;
      
      this.datePickerValue = [yearIndex, monthIndex, dayIndex];
    },
    
    confirmDateSelection() {
      if (!this.selectedDate) return;
      
      const year = this.selectedDate.getFullYear();
      const month = this.selectedDate.getMonth() + 1;
      const day = this.selectedDate.getDate();
      
      let dateText = '';
      
      if (this.selectedShortcut !== -1) {
        dateText = this.dateShortcuts[this.selectedShortcut].text;
        } else {
        dateText = `${month}月${day}日`;
      }
      
      this.dateRangeText = dateText;
      this.addFilterTag('date', dateText);
      this.showDatePicker = false;
    },
    
    // 城市选择器方法
    isSelectedCity(city) {
      return this.selectedCities.includes(city);
    },
    
    toggleCity(city) {
      const index = this.selectedCities.indexOf(city);
      if (index === -1) {
        this.selectedCities.push(city);
      } else {
        this.selectedCities.splice(index, 1);
      }
    },
    
    removeCity(index) {
      this.selectedCities.splice(index, 1);
    },
    
    confirmCitySelection() {
      if (this.selectedCities.length === 0) {
        this.selectedCitiesText = "选择城市";
      } else if (this.selectedCities.length === 1) {
        this.selectedCitiesText = this.selectedCities[0];
        } else {
        this.selectedCitiesText = `${this.selectedCities[0]}等${this.selectedCities.length}个城市`;
      }
      
      if (this.selectedCities.length > 0) {
        this.addFilterTag('city', this.selectedCitiesText);
      } else {
        this.removeTagByType('city');
      }
      
      this.showCityPicker = false;
    },
    
    // 轮播相关方法
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
      this.updateThumbnailScroll();
    },
    
    onSwiperTransition(e) {
      this.transitionProgress = e.detail.dx / e.detail.width;
    },
    
    setCurrentIndex(index) {
      this.currentIndex = index;
    },
    
    toggleAutoplay() {
      this.isPaused = !this.isPaused;
    },
    
    onCardTap(item, index) {
      // 点击卡片时的处理
      uni.navigateTo({
        url: `/pages/activity/detail?id=${item.id}`
      });
    },
    
    getTransform(index) {
      // 计算3D变换效果
      const diff = index - this.currentIndex;
      if (diff === 0) {
        return 'scale(1) translateZ(0)';
      } else {
        const scale = 0.85;
        const rotate = diff > 0 ? 5 : -5;
        return `scale(${scale}) rotateY(${rotate}deg) translateZ(-100rpx)`;
      }
    },
    
    updateThumbnailScroll() {
      // 计算缩略图滚动位置
      const itemWidth = 140; // 缩略图宽度 + 间距
      this.thumbnailScrollLeft = (this.currentIndex - 1) * itemWidth;
      if (this.thumbnailScrollLeft < 0) this.thumbnailScrollLeft = 0;
    },
    
    onThumbnailScroll(e) {
      // 缩略图滚动事件处理
    },
    
    // 拼团相关方法
    switchGroupTab(index) {
      this.currentGroupTab = index;
    },
    
    formatDay(date) {
      return date.getDate();
    },
    
    formatMonth(date) {
      const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
      return months[date.getMonth()].substring(0, 1) + '月';
    },
    
    formatWeekday(date) {
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return weekdays[date.getDay()];
    },
    
    formatTime(timeString) {
      return timeString;
    },
    
    calculateDiscount(groupPrice, originalPrice) {
      return Math.floor(groupPrice / originalPrice * 10);
    },
    
    calculateProgress(current, total) {
      return Math.min(100, Math.round(current / total * 100));
    },
    
    formatCountdown(deadline) {
      const now = new Date();
      const diff = new Date(deadline) - now;
      
      if (diff <= 0) {
        return '已结束';
      }
      
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
      
      if (days > 0) {
        return `${days}天${hours}小时`;
      } else if (hours > 0) {
        return `${hours}小时${minutes}分钟`;
          } else {
        return `${minutes}分钟${seconds}秒`;
      }
    },
    
    joinGroup(groupId) {
      // 加入拼团逻辑
      uni.showToast({
        title: '已加入拼团',
        icon: 'success'
      });
      uni.navigateTo({
        url:'/pages/index/detail',
      })
    },

    shareGroup(groupId) {
      // 分享拼团逻辑
      uni.showShareMenu({
        withShareTicket: true,
        success() {
          console.log('打开分享菜单成功');
        },
        fail() {
          console.log('打开分享菜单失败');
        }
      });
    },
    
    // 视图和排序方法
    changeViewMode(mode) {
      this.viewMode = mode;
      // 保存用户偏好
      uni.setStorageSync('viewMode', mode);
    },
    
    setSortOption(option) {
      this.currentSort = option;
      this.showSortOptions = false;
    },
    
    // 加载数据
    loadItems() {
      if (this.isLoading || this.isAllLoaded) return;
      
      this.isLoading = true;
      
      // 模拟网络请求
      setTimeout(() => {
        const newItems = this.generateMockItems();
        
        if (newItems.length === 0) {
          this.isAllLoaded = true;
        } else {
          this.listItems = [...this.listItems, ...newItems];
          this.page++;
        }
        
        this.isLoading = false;
      }, 1000);
    },
    
    loadMore() {
      this.loadItems();
    },
    
    onReachBottom() {
      // 当页面滚动到底部时自动加载更多
      if (!this.isLoading && !this.isAllLoaded) {
        this.loadItems();
      }
    },
    
    // 收藏功能
    toggleFavorite(index) {
      this.listItems[index].isFavorite = !this.listItems[index].isFavorite;
      
      // 提示收藏状态
          uni.showToast({
        title: this.listItems[index].isFavorite ? '已收藏' : '已取消收藏',
        icon: 'none'
      });
    },
    
    // 跳转到详情页
    navigateToDetail(id) {
      uni.navigateTo({
        url: '/pages/index/detail'
      });
    },
    
    // 生成模拟数据
    generateMockItems() {
      // 如果页码大于5，则不再生成数据，模拟全部加载完毕
      if (this.page > 5) return [];
      
      const items = [];
      const startIndex = (this.page - 1) * this.pageSize;
      
      // 定义一些模拟数据数组
      const destinations = ['首尔', '釜山', '济州岛', '大邱', '仁川', '光州'];
      const departures = ['北京', '上海', '广州', '深圳'];
      const flightNumbers = ['KE123', 'OZ456', 'KE789', 'OZ321', 'KE654', 'OZ987'];
      
      for (let i = 0; i < this.pageSize; i++) {
        const id = startIndex + i + 1;
        const departure = departures[Math.floor(Math.random() * departures.length)];
        const destination = destinations[Math.floor(Math.random() * destinations.length)];
        
        // 生成随机时间
        const departureHour = Math.floor(Math.random() * 12) + 7; // 7点到18点
        const arrivalHour = departureHour + Math.floor(Math.random() * 5) + 2; // 确保到达时间晚于出发时间
        const departureTime = `${String(departureHour).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`;
        const arrivalTime = `${String(arrivalHour).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`;
        
        items.push({
          id,
          title: `${departure}→${destination}${Math.floor(Math.random() * 3) + 3}日游`,
          image: `https://picsum.photos/id/${(id % 30) + 10}/400/300`,
          date: this.getRandomDate(),
          departure,
          destination,
          flightNumber: flightNumbers[Math.floor(Math.random() * flightNumbers.length)],
          departureTime,
          arrivalTime,
          groupPrice: Math.floor(Math.random() * 2000) + 1000,
          originalPrice: Math.floor(Math.random() * 3000) + 2000,
          groupCount: Math.floor(Math.random() * 20) + 1,
          remainingSlots: Math.floor(Math.random() * 10) + 1,
          viewCount: Math.floor(Math.random() * 1000) + 100,
          isHot: Math.random() > 0.7,
          isFavorite: Math.random() > 0.8,
          // 添加拼团相关信息
          requiredMembers: Math.floor(Math.random() * 5) + 3, // 3-7人成团
          currentMembers: Math.floor(Math.random() * 3) + 1, // 当前1-3人
          deadline: this.getRandomDeadline(), // 截止时间
          seatClass: ['经济舱', '商务舱', '头等舱'][Math.floor(Math.random() * 3)]
        });
      }
      
      return items;
    },
    
    // 添加生成随机截止时间的方法
    getRandomDeadline() {
      const now = new Date();
      const randomHours = Math.floor(Math.random() * 72); // 随机72小时内
      const deadline = new Date(now.getTime() + randomHours * 60 * 60 * 1000);
      return deadline.toISOString();
    },
    
    // 优化日期生成方法
    getRandomDate() {
      const startDate = new Date();
      const endDate = new Date();
      endDate.setMonth(endDate.getMonth() + 3);
      
      const randomDate = new Date(
        startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime())
      );
      
      // 格式化日期为 "YYYY-MM-DD"
      const year = randomDate.getFullYear();
      const month = String(randomDate.getMonth() + 1).padStart(2, '0');
      const day = String(randomDate.getDate()).padStart(2, '0');
      
      return `${year}-${month}-${day}`;
    },
    
    // 临时TabBar点击处理
    handleTabBarClick(index) {
      const routes = [
        'pages/index/index',
        'pages/concert/index',
        'pages/inspect/detail',
        'pages/plan/plan',
        'pages/kecheng/customer'
      ];
      
      if (index !== 0) { // 不是当前页面才跳转
        uni.switchTab({
          url: '/' + routes[index]
        });
      }
    },
    calendarConfirm(e) {
      console.log(e);
      const { startDate, endDate } = e;
      this.selectedDateRange = [startDate, endDate];
      
      // 更新显示文本
      if (startDate === endDate) {
        this.dateRangeText = this.formatDisplayDate(startDate);
      } else {
        this.dateRangeText = this.formatDisplayDate(startDate) + " - " + this.formatDisplayDate(endDate);
      }
      
      // 添加筛选标签
      this.addFilterTag('date', this.dateRangeText);
      
      this.showCalendar = false;
    },
    
    formatDisplayDate(dateString) {
      const date = new Date(dateString);
      return `${date.getMonth() + 1}月${date.getDate()}日`;
    },
    
    getDateString(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 新增初始化默认日历日期的方法
    initDefaultCalendarDate() {
      const today = new Date();
      const nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
      this.defaultCalendarDate = [
        this.getDateString(today),
        this.getDateString(nextWeek)
      ];
    },
    
    // 保留这个方法版本的 calendarFormatter
    calendarFormatter(day) {
      // 为日历组件格式化日期显示
      if (day.type === 'year') {
        return `${day.value}年`;
      } else if (day.type === 'month') {
        return `${day.value}月`;
      } else if (day.type === 'day') {
        return `${day.value}日`;
      }
      return day.value;
    },
    // 修改日历打开方法
    openCalendar() {
      this.showCalendar = true;
      console.log("打开日历", this.showCalendar);
    },
    onDateChange(e) {
      const date = e.detail.value;
      this.dateRangeText = this.formatDisplayDate(date);
      this.addFilterTag('date', this.dateRangeText);
    },
    selectDateRangeShortcut(index) {
      this.selectedRangeShortcut = index;
      
      const today = new Date();
      const shortcut = this.dateRangeShortcuts[index].value;
      
      switch(shortcut) {
        case 'today':
          this.startDate = this.formatDateString(today);
          this.endDate = this.formatDateString(today);
          break;
        case 'thisWeek':
          const firstDayOfWeek = new Date(today);
          const day = today.getDay() || 7; // 如果是周日，getDay() 返回 0，我们将其视为 7
          firstDayOfWeek.setDate(today.getDate() - day + 1); // 设置为本周一
          
          const lastDayOfWeek = new Date(firstDayOfWeek);
          lastDayOfWeek.setDate(firstDayOfWeek.getDate() + 6); // 设置为本周日
          
          this.startDate = this.formatDateString(firstDayOfWeek);
          this.endDate = this.formatDateString(lastDayOfWeek);
          break;
        case 'thisMonth':
          const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
          const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
          
          this.startDate = this.formatDateString(firstDayOfMonth);
          this.endDate = this.formatDateString(lastDayOfMonth);
          break;
        case 'next7days':
          const next7days = new Date(today);
          next7days.setDate(today.getDate() + 6); // +6 因为包括今天
          
          this.startDate = this.formatDateString(today);
          this.endDate = this.formatDateString(next7days);
          break;
        case 'next30days':
          const next30days = new Date(today);
          next30days.setDate(today.getDate() + 29); // +29 因为包括今天
          
          this.startDate = this.formatDateString(today);
          this.endDate = this.formatDateString(next30days);
          break;
      }
    },
    formatDateString(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    formatDisplayDateRange() {
      if (!this.startDate || !this.endDate) return '';
      
      const start = new Date(this.startDate);
      const end = new Date(this.endDate);
      
      const startMonth = start.getMonth() + 1;
      const startDay = start.getDate();
      const endMonth = end.getMonth() + 1;
      const endDay = end.getDate();
      
      if (this.startDate === this.endDate) {
        return `${startMonth}月${startDay}日`;
      }
      
      return `${startMonth}月${startDay}日 - ${endMonth}月${endDay}日`;
    },
    confirmDateRangeSelection() {
      if (!this.startDate || !this.endDate) {
        uni.showToast({
          title: '请选择完整的日期范围',
          icon: 'none'
        });
        return;
      }
      
      // 更新显示文本
      this.dateRangeText = this.formatDisplayDateRange();
      
      // 添加筛选标签
      this.addFilterTag('date', this.dateRangeText);
      
      // 关闭弹窗
      this.showDateRangePicker = false;
    },
    onStartDateChange(e) {
      this.startDate = e.detail.value;
      // 如果结束日期早于开始日期，重置结束日期
      if (this.endDate && this.endDate < this.startDate) {
        this.endDate = this.startDate;
      }
      this.selectedRangeShortcut = -1; // 清除快捷选择
    },
    onEndDateChange(e) {
      this.endDate = e.detail.value;
      this.selectedRangeShortcut = -1; // 清除快捷选择
    },
    // 添加 openDateRangePicker 方法
    openDateRangePicker() {
      this.showDateRangePicker = true;
      console.log("打开日期范围选择器", this.showDateRangePicker);
    },
    formatDate(date) {
      const d = new Date(date);
      const month = d.getMonth() + 1;
      const day = d.getDate();
      return `${month}月${day}日`;
    },
  },
};
</script>

<style lang="scss">
/* 全局容器样式 - Glassmorphism 风格 */
.container {
  padding-bottom: 0;
  background: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* 顶部筛选区域 - Glassmorphism 风格 */
.filter-section {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 30rpx;
  margin:  0 20rpx 20rpx 20rpx ;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
}

/* 搜索框样式 - Glassmorphism 风格 */
.search-box {
  width: 100%;
  margin-bottom: 20rpx;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16rpx;
  padding: 15rpx 20rpx;
  height: 70rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.search-icon {
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.6);
  margin-right: 10rpx;
}

input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.8);
  background: transparent;
}

.clear-btn {
  font-size: 36rpx;
  color: rgba(0, 0, 0, 0.5);
  padding: 0 10rpx;
}

/* 筛选按钮区域 - Glassmorphism 风格 */
.filter-buttons {
  display: flex;
  justify-content: space-between;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16rpx;
  padding: 15rpx 20rpx;
  width: 48%;
  height: 70rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.filter-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
}

.date-icon, .city-icon {
  font-size: 32rpx;
  margin-right: 10rpx;
  color: rgba(0, 0, 0, 0.6);
}

.filter-text {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

/* 已选筛选条件展示样式 - Glassmorphism 风格 */
.selected-filters {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 20rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
}

.filter-tags {
  flex: 1;
  white-space: nowrap;
  height: 60rpx;
}

.tag {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 122, 255, 0.2);
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  margin-right: 16rpx;
  font-size: 24rpx;
  color: rgba(0, 122, 255, 0.9);
  border: 1px solid rgba(0, 122, 255, 0.3);
}

.tag-close {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: rgba(0, 122, 255, 0.9);
}

.clear-all {
  font-size: 28rpx;
  color: rgba(0, 122, 255, 0.9);
  padding: 10rpx;
}

/* 弹窗样式 - Glassmorphism 风格 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 30rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
  width: 90%;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
}

.close-btn {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.5);
  padding: 10rpx 20rpx;
}

/* 日期选择器样式 - Glassmorphism 风格 */
.date-shortcuts {
  display: flex;
  padding: 20rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
}

.shortcut-btn {
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: rgba(0, 122, 255, 0.9);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;
}

.shortcut-btn.active {
  background: rgba(0, 122, 255, 0.9);
  color: white;
  border: 1px solid rgba(0, 122, 255, 0.9);
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

/* 日期范围选择器样式 - Glassmorphism 风格 */
.date-range-picker {
  max-height: 90vh;
}

.date-range-section {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.date-range-label {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 15rpx;
}

.date-picker-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16rpx;
  padding: 20rpx;
  font-size: 30rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.field-arrow {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.5);
}

.selected-range-preview {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.preview-label {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.6);
  margin-right: 10rpx;
}

.preview-value {
  font-size: 30rpx;
  color: rgba(0, 122, 255, 0.9);
  font-weight: 500;
}

.modal-footer {
  padding: 20rpx 30rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: rgba(0, 122, 255, 0.9);
  color: white;
  border-radius: 40rpx;
  font-size: 32rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;
}

.confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.3);
}

/* 轮播区域样式 - Glassmorphism 风格 */
.carousel-section {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 30rpx;
  margin: 0 20rpx 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
}

.carousel-card {
  width: 90%;
  height: 450rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  transform-origin: center center;
  transform: scale(0.85) translateZ(-100rpx);
  perspective: 1000rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.carousel-card.active {
  transform: scale(1) translateZ(0);
  box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.3);
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.indicator-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  margin: 0 8rpx;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.indicator-dot.active {
  width: 32rpx;
  border-radius: 8rpx;
  background: rgba(0, 122, 255, 0.9);
}

/* 拼团区域样式 - Glassmorphism 风格 */
.group-buying-section {
  margin: 0 20rpx 20rpx;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
}

.group-filter-tabs {
  margin-bottom: 30rpx;
  position: relative;
}

.filter-tab-item {
  display: inline-block;
  padding: 0 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.6);
  position: relative;
  transition: all 0.3s;
}

.filter-tab-item.active {
  color: rgba(0, 122, 255, 0.9);
  font-weight: 500;
}

.filter-tab-item.active::after {
  content: '';
  position: absolute;
  left: 30rpx;
  right: 30rpx;
  bottom: 0;
  height: 4rpx;
  background: rgba(0, 122, 255, 0.9);
  border-radius: 2rpx;
}

.group-item {
  position: relative;
  padding: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.group-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.group-info {
  display: flex;
  margin-bottom: 20rpx;
}

.group-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  margin-right: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.group-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.group-title {
  font-size: 32rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 10rpx;
}

.group-location, .flight-info {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 10rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 6rpx 16rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.location-icon, .flight-icon {
  margin-right: 8rpx;
  font-size: 26rpx;
}

.flight-number {
  font-weight: 500;
  color: rgba(0, 122, 255, 0.9);
  margin-right: 8rpx;
}

.flight-divider {
  margin: 0 8rpx;
  color: rgba(0, 0, 0, 0.4);
}

.group-progress-container {
  margin-bottom: 20rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 16rpx;
  padding: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.group-members {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.member-avatars {
  display: flex;
  margin-right: 15rpx;
}

.member-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 2rpx solid rgba(255, 255, 255, 0.8);
  margin-right: -15rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.member-count {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(0, 0, 0, 0.6);
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.member-status {
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.6);
}

.group-progress {
  height: 10rpx;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5rpx;
  overflow: hidden;
  margin-bottom: 15rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(52, 199, 89, 0.7) 0%, rgba(52, 199, 89, 0.9) 100%);
  border-radius: 5rpx;
}

.group-deadline {
  display: flex;
  justify-content: flex-end;
  font-size: 26rpx;
}

.deadline-label {
  color: rgba(0, 0, 0, 0.5);
}

.deadline-time {
  color: rgba(255, 59, 48, 0.9);
  font-weight: 500;
  margin-left: 10rpx;
}

.group-actions {
  display: flex;
  margin-top: 20rpx;
}

.join-btn {
  flex: 3;
  height: 80rpx;
  line-height: 80rpx;
  background: rgba(255, 149, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ff9500;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 40rpx;
  margin-right: 20rpx;
  border: 1px solid rgba(255, 149, 0, 0.3);
  box-shadow: 0 8rpx 16rpx rgba(255, 149, 0, 0.2);
  text-align: center;
  transition: all 0.3s ease;
}

.join-btn:active {
  transform: scale(0.98);
  background: rgba(255, 149, 0, 0.4);
  box-shadow: 0 4rpx 8rpx rgba(255, 149, 0, 0.2);
}

.share-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(0, 122, 255, 0.9);
  font-size: 30rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 122, 255, 0.3);
  box-shadow: 0 8rpx 16rpx rgba(0, 122, 255, 0.1);
  transition: all 0.3s ease;
}

.share-btn:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.1);
}

.share-icon {
  margin-right: 8rpx;
}

/* 推荐项目列表样式 - Glassmorphism 风格增强 */
.item-container {
  margin-top: 20rpx;
}

.grid-view {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item-card {
  position: relative;
  margin-bottom: 30rpx;
  overflow: hidden;
  transition: all 0.3s ease;
}

.list-item {
  display: flex;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 20rpx;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.list-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.grid-item {
  width: calc(50% - 20rpx); /* 考虑间距 */
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.grid-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.list-item .item-image {
  width: 200rpx;
  height: 160rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  margin-right: 24rpx;
}

.grid-item .item-image {
  width: 100%;
  height: 200rpx;
  border-radius: 16rpx 16rpx 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  object-fit: cover;
}

.list-item .item-info {
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.grid-item .item-info {
  padding: 16rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.item-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  width: 100%;
}

.item-title {
  font-size: 30rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  flex: 1;
  margin-right: 16rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flight-number {
  font-size: 24rpx;
  color: rgba(0, 122, 255, 0.9);
  background: rgba(0, 122, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
  border: 1px solid rgba(0, 122, 255, 0.2);
}

.travel-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 15rpx;
}

.travel-date {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 8rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 6rpx 16rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.date-icon {
  margin-right: 6rpx;
  font-size: 24rpx;
}

.travel-route {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 6rpx 16rpx;
  max-width: calc(100% - 32rpx);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 10rpx;
  overflow: hidden;
}

.departure,
.destination {
  white-space: nowrap;
  max-width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.flight-time {
  color: rgba(0, 0, 0, 0.7);
  font-size: 24rpx;
  white-space: nowrap;
  flex-shrink: 0;
}

.group-status {
  display: none;
}

.separator {
  margin: 0 8rpx;
  color: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

/* 加载更多按钮 - Glassmorphism 风格 */
.load-more {
  margin-top: 30rpx;
  text-align: center;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  border-top: 4rpx solid rgba(0, 122, 255, 0.9);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.6);
}

.load-more-btn {
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.7);
  font-size: 28rpx;
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.load-more-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.1);
}

.all-loaded {
  margin: 30rpx 0;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 28rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40rpx;
  width: 60%;
  margin: 30rpx auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 轮播区域样式 */
.carousel-container {
  position: relative;
  height: 500rpx;
  overflow: hidden;
}

.carousel-swiper {
  height: 100%;
  width: 100%;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.carousel-card {
  width: 90%;
  height: 450rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  transform-origin: center center;
  transform: scale(0.85) translateZ(-100rpx);
  perspective: 1000rpx;
}

.carousel-card.active {
  transform: scale(1) translateZ(0);
  box-shadow: 0 15rpx 30rpx rgba(0, 0, 0, 0.2);
}

.carousel-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.carousel-tag {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: #ff3b30;
  color: #fff;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  z-index: 3;
}

.carousel-tag.recommend {
  background-color: #34c759;
  right: 120rpx;
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  z-index: 2;
  color: #fff;
}

.carousel-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-meta {
  display: flex;
  margin-bottom: 10rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
  font-size: 24rpx;
}

.meta-icon {
  margin-right: 6rpx;
  font-size: 24rpx;
}

.carousel-price {
  display: flex;
  align-items: baseline;
}

.price-label {
  font-size: 24rpx;
}

.price-value {
  font-size: 36rpx;
  font-weight: 600;
  margin-right: 10rpx;
}

.price-original {
  font-size: 24rpx;
  text-decoration: line-through;
  opacity: 0.7;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.indicator-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #d1d1d6;
  margin: 0 8rpx;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  width: 32rpx;
  border-radius: 8rpx;
  background-color: #007aff;
}

.carousel-thumbnails {
  margin-top: 20rpx;
  white-space: nowrap;
  height: 120rpx;
}

.thumbnail-item {
  display: inline-block;
  width: 120rpx;
  height: 80rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  overflow: hidden;
  opacity: 0.6;
  transition: all 0.3s ease;
}

.thumbnail-item.active {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.thumbnail-item image {
  width: 100%;
  height: 100%;
}

/* 拼团区域样式 */
.group-list {
  padding: 10rpx 0;
}

.group-item {
  padding: 30rpx;
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  background-color: #f9f9f9;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.group-info {
  display: flex;
  margin-bottom: 20rpx;
}

.group-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}

.group-details {
  flex: 1;
}

.group-title {
        font-size: 32rpx;
  font-weight: 600;
  color: #000;
  margin-bottom: 10rpx;
}

.group-location, .group-time {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #8e8e93;
  margin-bottom: 8rpx;
}

.location-icon, .time-icon {
  margin-right: 8rpx;
  font-size: 26rpx;
}

.group-price {
      display: flex;
      align-items: center;
  margin-top: 10rpx;
}

.group-price-value {
  font-size: 36rpx;
  font-weight: 600;
  color: #ff3b30;
}

.group-original-price {
        font-size: 26rpx;
  color: #8e8e93;
  text-decoration: line-through;
  margin: 0 10rpx;
}

.group-discount {
  font-size: 24rpx;
  color: #fff;
  background-color: #ff3b30;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.group-progress-container {
  margin-bottom: 20rpx;
}

.group-members {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.member-avatars {
  display: flex;
  margin-right: 15rpx;
}

.member-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
  margin-right: -15rpx;
}

.member-count {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: #f2f2f7;
  color: #8e8e93;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5rpx;
}

.member-status {
  font-size: 26rpx;
  color: #8e8e93;
}

.group-progress {
  height: 10rpx;
  background-color: #e5e5ea;
  border-radius: 5rpx;
  overflow: hidden;
  margin-bottom: 15rpx;
}

.progress-bar {
  height: 100%;
  background-color: #34c759;
  border-radius: 5rpx;
}

.group-deadline {
  display: flex;
  justify-content: flex-end;
  font-size: 26rpx;
}

.deadline-label {
  color: #8e8e93;
}

.deadline-time {
  color: #ff3b30;
  font-weight: 500;
  margin-left: 10rpx;
}

.group-actions {
  display: flex;
}

.join-btn {
  flex: 3;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ff9500;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.share-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f2f2f7;
  color: #007aff;
  font-size: 30rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-icon {
  margin-right: 8rpx;
}

.empty-tip {
  padding: 60rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #8e8e93;
}

/* 列表展示区域样式 - Glassmorphism 风格 */
.list-section {
  margin: 0 20rpx 20rpx;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
  box-sizing: border-box;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.list-tools {
  display: flex;
  align-items: center;
}

.view-toggle {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8rpx;
  overflow: hidden;
  margin-right: 20rpx;
}

.toggle-btn {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.toggle-btn.active {
  background: rgba(0, 122, 255, 0.7);
  color: white;
}

.toggle-btn:active {
  transform: scale(0.95);
}

.sort-dropdown {
  position: relative;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.7);
  padding: 10rpx 20rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.sort-dropdown:active {
  transform: scale(0.98);
}

.dropdown-icon {
  font-size: 24rpx;
  margin-left: 10rpx;
  transition: transform 0.3s ease;
}

.sort-dropdown.active .dropdown-icon {
  transform: rotate(180deg);
}

.sort-options {
  position: absolute;
  top: 70rpx;
  right: 0;
  width: 240rpx;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  z-index: 10;
  border: 1px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  transform-origin: top right;
  animation: dropdown-appear 0.3s ease forwards;
}

@keyframes dropdown-appear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sort-option {
  padding: 20rpx;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.sort-option:active {
  background: rgba(0, 122, 255, 0.1);
}

.sort-option.active {
  color: rgba(0, 122, 255, 0.9);
  font-weight: 500;
  background: rgba(0, 122, 255, 0.1);
}

/* 统一卡片样式 */
.item-card {
  position: relative;
  margin-bottom: 30rpx;
  overflow: hidden;
  transition: all 0.3s ease;
  transform: translateZ(0);
}

.list-item {
  display: flex;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 20rpx;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.list-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.grid-item {
  width: 48%;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.grid-item:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 图片样式优化 */
.list-item .item-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
}

.list-item .item-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}

.grid-item .item-image {
  width: 100%;
  height: 240rpx;
  border-radius: 16rpx 16rpx 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}

.grid-item .item-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}

/* 信息区域样式优化 */
.list-item .item-info {
  flex: 1;
  padding: 0 0 0 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.grid-item .item-info {
  padding: 20rpx;
  min-height: 200rpx;
  justify-content: space-between;
}

/* 标题和航班号 */
.item-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

.item-title {
  font-size: 30rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flight-number {
  font-size: 24rpx;
  color: rgba(0, 122, 255, 0.9);
  background: rgba(0, 122, 255, 0.15);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-left: 10rpx;
  border: 1px solid rgba(0, 122, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 统一胶囊式标签样式 */
.travel-date, .travel-route, .flight-info, .group-status {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 6rpx 16rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin-bottom: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.travel-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 15rpx;
}

.departure, .destination {
  font-weight: 500;
}

.route-arrow {
  margin: 0 10rpx;
  color: rgba(0, 0, 0, 0.4);
}

.group-status {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 10rpx;
}

.separator {
  margin: 0 10rpx;
  color: rgba(0, 0, 0, 0.3);
}

/* 加载更多按钮 - Glassmorphism 风格 */
.load-more {
  margin-top: 30rpx;
  text-align: center;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40rpx;
  padding: 15rpx 30rpx;
  width: fit-content;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  border-top: 4rpx solid rgba(0, 122, 255, 0.9);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10rpx;
}

.load-more-btn {
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(0, 0, 0, 0.7);
  font-size: 28rpx;
  box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.load-more-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.1);
}

.all-loaded {
  margin: 30rpx auto;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-size: 28rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40rpx;
  width: 60%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 统一拼团区域样式 */
.group-buying-section {
  margin: 0 20rpx 20rpx;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
}

/* 统一轮播区域样式 */
.carousel-section {
  margin: 0 20rpx 20rpx;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20rpx;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
}

/* 统一标题样式 */
.section-title {
  font-size: 34rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 30rpx;
  background: linear-gradient(to bottom, #007aff, #00c6ff);
  border-radius: 4rpx;
}

/* 信息行样式 */
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.info-icon {
  font-size: 28rpx;
  margin-right: 10rpx;
  color: rgba(0, 0, 0, 0.6);
}

.info-text {
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
}

/* 路线信息样式 */
.route-info {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 8rpx 16rpx;
  margin-top: 10rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  width: fit-content;
}

.city-name {
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
}

.route-arrow {
  margin: 0 8rpx;
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
}

/* 添加日期显示样式 */
.group-date {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* 修改 travel-date 样式 */
.travel-date {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 10rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 6rpx 16rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 修改 travel-route 样式 */
.travel-route {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 6rpx 16rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 10rpx;
}

.time-divider {
  margin: 0 8rpx;
  color: rgba(0, 0, 0, 0.4);
}

.flight-time {
  color: rgba(0, 0, 0, 0.7);
  font-size: 24rpx;
}

/* 修改 group-status 样式 */
.group-status {
  font-size: 24rpx;
  color: rgba(0, 122, 255, 0.9);
  background: rgba(0, 122, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 30rpx;
  width: fit-content;
  border: 1px solid rgba(0, 122, 255, 0.2);
}

/* 调整列表布局 */
.list-item .item-info {
  padding: 0 0 0 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-item .item-info {
  padding: 20rpx;
  min-height: 180rpx;
}

/* 城市选择弹窗样式 */
.modal-content {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 30rpx;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
  width: 90%;
  max-height: 85vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 热门城市区域 */
.hot-cities {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}

.section-label {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 20rpx;
  font-weight: 500;
}

.city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.city-tag {
  padding: 12rpx 24rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 30rpx;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.city-tag.active {
  background: rgba(0, 122, 255, 0.15);
  color: rgba(0, 122, 255, 0.9);
  border-color: rgba(0, 122, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
}

/* 已选城市区域 */
.selected-cities {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}

.selected-tag {
  display: inline-flex;
  align-items: center;
  padding: 12rpx 24rpx;
  background: rgba(0, 122, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 30rpx;
  font-size: 26rpx;
  color: rgba(0, 122, 255, 0.9);
  border: 1px solid rgba(0, 122, 255, 0.3);
  margin: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.1);
}

.tag-close {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: rgba(0, 122, 255, 0.7);
}

/* 全部城市列表区域 */
.all-cities {
  padding: 20rpx 30rpx;
  height: calc(85vh - 400rpx);
  overflow: hidden;
  background: transparent;
}

.city-list {
  height: 100%;
  padding-right: 20rpx;
}

.city-group {
  margin-bottom: 30rpx;
}

.group-label {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.4);
  padding: 10rpx 0;
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 1;
  font-weight: 500;
}

.group-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 10rpx 0;
  margin-bottom: 20rpx;
}

.city-item {
  padding: 12rpx 24rpx;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 30rpx;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.city-item.active {
  background: rgba(0, 122, 255, 0.15);
  color: rgba(0, 122, 255, 0.9);
  border-color: rgba(0, 122, 255, 0.3);
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
}

.city-item:active {
  transform: scale(0.95);
}

/* 确认按钮区域 */
.modal-footer {
  padding: 20rpx 30rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 2;
}

.confirm-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: rgba(0, 122, 255, 0.9);
  color: white;
  border-radius: 40rpx;
  font-size: 32rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 122, 255, 0.3);
  transition: all 0.3s ease;
}

.confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 8rpx rgba(0, 122, 255, 0.3);
}

/* 弹窗头部 */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.modal-title {
  font-size: 32rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.8);
}

.close-btn {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.5);
  padding: 10rpx 20rpx;
}

/* 修改滚动条样式 */
.city-list::-webkit-scrollbar {
  width: 8rpx;
  background: transparent;
}

.city-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4rpx;
}

/* 修改列表容器样式 */
.item-container {
  margin-top: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.grid-view {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  width: 100%;
}

/* 修改信息布局样式 */
.list-item .item-info {
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx; /* 统一各元素间距 */
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 城市路线样式 */
.city-route {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.departure,
.destination {
  font-weight: 500;
  max-width: 140rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.route-arrow {
  margin: 0 12rpx;
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
}

/* 航班时间样式 */
.flight-schedule {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.time-icon {
  margin-right: 8rpx;
  font-size: 24rpx;
}

.flight-time {
  color: rgba(0, 0, 0, 0.7);
  font-size: 26rpx;
  white-space: nowrap;
}

/* 调整日期显示样式 */
.travel-date {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: rgba(0, 0, 0, 0.7);
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 调整已成团状态样式 */
.group-status {
  font-size: 24rpx;
  color: rgba(0, 122, 255, 0.9);
  background: rgba(0, 122, 255, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  width: fit-content;
  border: 1px solid rgba(0, 122, 255, 0.2);
  margin-top: 4rpx;
}

/* 在item-info中添加按钮区域 */
.list-item .item-info {
  // ... 现有样式保持不变 ...
  
  /* 添加按钮容器 */
  .item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10rpx;
  }

  .join-group-btn {
    background: rgba(255, 149, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 30rpx;
    padding: 12rpx 30rpx;
    font-size: 26rpx;
    color: #ff9500;
    border: 1px solid rgba(255, 149, 0, 0.3);
    box-shadow: 0 4rpx 12rpx rgba(255, 149, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .join-group-btn:active {
    transform: scale(0.95);
    background: rgba(255, 149, 0, 0.3);
    box-shadow: 0 2rpx 6rpx rgba(255, 149, 0, 0.1);
  }

  .join-icon {
    font-size: 24rpx;
    margin-right: 6rpx;
  }
}

/* 为网格视图添加按钮样式 */
.grid-item .item-info {
  // ... 现有样式保持不变 ...
  
  .item-actions {
    margin-top: auto;
    padding-top: 10rpx;
  }

  .join-group-btn {
    width: 100%;
    margin-top: 10rpx;
  }
}
</style>
